<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
           <UserHeader @atbianAdd="addTodo"/>
           
           <UserList :todos="todos" />
           
           <UserFooter :todos="todos" @atbianTodoCheckAll="todoCheckAll" ref="userFooter" />
            </div>
        </div>
    </div>
</template>

<script>
// 引入消息发布与订阅
import pubsub from 'pubsub-js'
// 引入 Header
import UserHeader from './components/UserHeader.vue'
// 引入 List
import UserList from './components/UserList.vue'
// 引入 Footer
import UserFooter from './components/UserFooter.vue'

export default {
    name:'App',
    data(){
        return {
            todos:JSON.parse(localStorage.getItem('todos')) ||  []
        }
    },
    methods:{
        // 添加
        addTodo(t){
            // 子组件调用方法传入对象，添加数值，重新解析模板
            this.todos.unshift(t)
        },
        // 取消or选中
        revamp(id){
            this.todos.forEach(todo => {
                if(todo.id === id)  todo.done = !todo.done
            });
        },
        // 删除 , 由于订阅消息会有两个参数，可以使用 _ 占位
        del(_,id){
            this.todos =  this.todos.filter(todo=>{
                return todo.id !== id 
            })
        },
        // 全选or取消全选
        todoCheckAll(done){
            this.todos.forEach(todo=>{
                todo.done = done
            })
        },
        // 清除已完成
        delTodoDeon(){
            // 过滤调所有的已完成
            this.todos =  this.todos.filter(todo=> !todo.done)
        }
    },
    // 监视属性
    watch:{
        todos:{
            deep:true, //深度监视
            
            handler(value){
                // 每次修改将磁盘数据进行更新
                localStorage.setItem('todos',JSON.stringify(value));
            }
        }
    },
    // 注册组件
    components:{
        UserHeader,
        UserList,
        UserFooter,
    }, 
    // 钩子函数，已挂载
    mounted(){
        this.$refs.userFooter.$on('atbianDelTodoDeon',this.delTodoDeon)
        // 定义全局事件 revamp 用于 选中or取消选中
        this.$bus.$on('revamp',this.revamp)
        // 订阅消息
        this.pubId = pubsub.subscribe('del',this.del)

    },
    // 销毁前，解绑该组件相关的自定事件
    beforeDestroy(){
        // 解绑多个自定义事件
        this.$bus.$off(['revamp'])
        // 取消订阅
        pubsub.unsubscribe(this.pubId)
    },
    
}
</script> 

<style>
    /*base*/
    body {
    background: #fff;
    }
    .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    }
    .btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
    }
    .btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
    }
    .btn:focus {
    outline: none;
    }
    .todo-container {
    width: 600px;
    margin: 0 auto;
    }
    .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    }

    

    
    

    

</style>

 